<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import { NButton, NDatePicker, NGrid } from 'naive-ui';
  import { useAppStore } from '@/store/modules/app';
  import {
    fetchGetDataTable,
    fetchGetDataTotal,
    fetchGetDataVoiceTotal,
  } from '@/service/api';
  import { $t } from '@/locales';
  import HeaderBanner from './modules/header-banner.vue';
  import CardData from './modules/card-data.vue';
  import LineChart from './modules/line-chart.vue';
  import PieChart from './modules/pie-chart.vue';
  import ProjectNews from './modules/project-news.vue';
  import CreativityBanner from './modules/creativity-banner.vue';
  const appStore = useAppStore();
  interface typeBtnType {
    label: string;
    value: string;
  }

  const gap = computed(() => (appStore.isMobile ? 0 : 16));
  const range = ref<any>([
    Number(
      new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)
    ),
    Number(
      new Date(
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        0,
        23,
        59,
        59,
        999
      )
    ),
  ]);
  const typeBtn = ref<typeBtnType[]>([
    { label: $t('common.day'), value: 'day' },
    { label: $t('common.week'), value: 'week' },
    { label: $t('common.month'), value: 'month' },
  ]);
  const typeKey = ref<string>('day');
  const userData = ref<any>();
  const dataTotal = ref<any>();
  const dataVoiceTotal = ref<any>();

  // 获取注册数
  const fetchUserData = async (
    type: string,
    startTime: number,
    endTime: number
  ) => {
    const res: any = await fetchGetDataTable({
      type,
      startTime: new Date(+new Date(startTime) + 8 * 3600 * 1000).toISOString(),
      endTime: new Date(+new Date(endTime) + 8 * 3600 * 1000).toISOString(),
    });
    return res?.data?.data ?? [];
  };

  // 查询选项
  const handleSearch = async () => {
    const data = await fetchUserData(
      typeKey.value,
      range.value[0],
      range.value[1]
    );
    userData.value = data;
  };

  // 获取数据总数
  const getDataTotal = async () => {
    const res: any = await fetchGetDataTotal();
    dataTotal.value = res?.data?.data ?? {};
  };

  // 获取数据总数
  const getDataVoiceTotal = async () => {
    const res: any = await fetchGetDataVoiceTotal();
    dataVoiceTotal.value = res?.data?.data ?? {};
  };

  onMounted(() => {
    // handleSearch();
    // getDataTotal();
    // getDataVoiceTotal();
  });
</script>

<template>
  <NSpace vertical :size="16">
    <!-- <HeaderBanner /> -->
    <CardData :data="dataTotal" />
    <NGrid :x-gap="gap" :y-gap="16">
      <NGi span="24 s:24 m:14">
        <NCard :bordered="false" class="card-wrapper">
          <NSpace>
            <NButton
              v-for="item in typeBtn"
              :key="item.value"
              :type="typeKey === item.value ? 'primary' : 'default'"
              :on-click="() => (typeKey = item.value)"
            >
              {{ item.label }}
            </NButton>
            <NDatePicker v-model:value="range" type="datetimerange" clearable />
            <NButton type="primary" :on-click="handleSearch">{{
              $t('common.search')
            }}</NButton>
          </NSpace>
        </NCard>
      </NGi>
    </NGrid>
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <NCard :bordered="false" class="card-wrapper">
          <LineChart :data="userData?.userData" />
        </NCard>
      </NGi>
      <NGi span="24 s:24 m:10">
        <NCard :bordered="false" class="card-wrapper">
          <PieChart :data="dataVoiceTotal" />
        </NCard>
      </NGi>
    </NGrid>
    <!--
 <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <ProjectNews />
      </NGi>
      <NGi span="24 s:24 m:10">
        <CreativityBanner />
      </NGi>
    </NGrid>
-->
  </NSpace>
</template>

<style scoped></style>
